<template>
  <el-dialog :title="title" v-model="open" width="600px" append-to-body>
    <el-form ref="partnerRef" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('partner.name')" prop="name">
            <el-input v-model="form.name" :placeholder="$t('partner.namePlaceholder')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('partner.code')" prop="code">
            <el-input v-model="form.code" :placeholder="$t('partner.codePlaceholder')" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('partner.phone')" prop="phone">
            <el-input v-model="form.phone" :placeholder="$t('partner.phonePlaceholder')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('partner.partnerType')" prop="partnerType">
            <el-select v-model="form.partnerType" :placeholder="$t('partner.partnerTypePlaceholder')" clearable style="width: 100%">
              <el-option label="会员" value="VIP" />
              <el-option label="流量" value="FLOW" />
              <el-option label="API接入" value="API" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('partner.cashierType')" prop="cashierType">
            <el-select v-model="form.cashierType" :placeholder="$t('partner.cashierTypePlaceholder')" clearable style="width: 100%">
              <el-option label="内部收银" value="IN" />
              <el-option label="外部收银" value="OUT" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('partner.channelId')" prop="channelId">
            <el-input v-model="form.channelId" :placeholder="$t('partner.channelIdPlaceholder')" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('partner.status')" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio
                  v-for="dict in sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
              >{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('partner.sort')" prop="sort">
            <el-input-number v-model="form.sort" controls-position="right" :min="0" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item :label="$t('partner.address')" prop="address">
        <el-input v-model="form.address" type="textarea" :placeholder="$t('partner.addressPlaceholder')" />
      </el-form-item>
      
      <el-form-item :label="$t('partner.remark')" prop="remark">
        <el-input v-model="form.remark" type="textarea" :placeholder="$t('partner.remarkPlaceholder')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('jbx.text.submit') }}</el-button>
        <el-button @click="cancel">{{ $t('jbx.text.close') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="PartnerEdit" lang="ts">
import { ref, getCurrentInstance, reactive, toRefs, nextTick, watch } from "vue";
import { ElForm } from "element-plus";
import modal from "@/plugins/modal";
import { useI18n } from "vue-i18n";
import { getPartner, savePartner, updatePartner } from "@/api/channel/partner";

const { t } = useI18n();
const { proxy } = getCurrentInstance()!;

// 字典数据
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

const emit = defineEmits(['dialogOfClosedMethods']);

const open = ref(false);
const title = ref("");
const partnerRef = ref<InstanceType<typeof ElForm> | null>(null);

// 定义变量
const data = reactive({
  form: {
    id: undefined,
    name: undefined,
    code: undefined,
    phone: undefined,
    partnerType: undefined,
    cashierType: 'IN',
    channelId: 'C000',
    status: 1,
    sort: 0,
    address: undefined,
    remark: undefined
  },
  rules: {
    name: [{ required: true, message: t('partner.nameRequired'), trigger: "blur" }],
    code: [{ required: true, message: t('partner.codeRequired'), trigger: "blur" }],
    phone: [{ required: true, message: t('partner.phoneRequired'), trigger: "blur" }],
    partnerType: [{ required: true, message: t('partner.partnerTypeRequired'), trigger: "blur" }],
    cashierType: [{ required: true, message: t('partner.cashierTypeRequired'), trigger: "blur" }],
    channelId: [{ required: true, message: t('partner.channelIdRequired'), trigger: "blur" }],
    sort: [{ required: true, message: t('partner.sortRequired'), trigger: "blur" }]
  }
});

const { form, rules } = toRefs(data);

const props = defineProps<{
  title?: string
  open?: boolean
  formId?: string
}>();

watch(
    () => props.open,
    (val) => {
      if (val) {
        open.value = val
        if (props.formId) {
          getPartner(props.formId).then((response: any) => {
            form.value = response.data;
          });
        } else {
          reset();
        }
      } else {
        open.value = false;
      }
    },
    { immediate: true }
);

// 重置表单
function reset() {
  form.value = {
    id: undefined,
    name: undefined,
    code: undefined,
    phone: undefined,
    partnerType: undefined,
    cashierType: 'IN',
    channelId: 'C000',
    status: 1,
    sort: 0,
    address: undefined,
    remark: undefined
  };
  partnerRef.value?.resetFields();
}

// 提交表单
function submitForm() {
  partnerRef.value?.validate((valid) => {
    if (valid) {
      if (form.value.id) {
        // 修改合作方
        updatePartner(form.value).then(() => {
          modal.msgSuccess(t('jbx.alert.update.success'));
          open.value = false;
          emit("dialogOfClosedMethods", true);
        });
      } else {
        // 新增合作方
        savePartner(form.value).then(() => {
          modal.msgSuccess(t('jbx.alert.add.success'));
          open.value = false;
          emit("dialogOfClosedMethods", true);
        });
      }
    }
  });
}

// 取消
function cancel() {
  open.value = false;
  partnerRef.value?.resetFields();
  emit("dialogOfClosedMethods", false);
}
</script>